<script setup>
import { ref, watch, inject } from 'vue';
import { message } from 'ant-design-vue';
import { sexOptions } from '@/util/const.js';
import { REQU, toFormData, useResp } from '@/net/requ.js';

const orgOptions = inject('orgOptions');
const roleListOfUser = inject('roleListOfUser');
const props = defineProps(['visible', 'row']);
const emit = defineEmits(['update:visible', 'ok']);

const visible = ref(props.visible);
watch(visible, value => emit('update:visible', value));

const formElem = ref();

const rules = {
  realName: [ { required: true, message: '请输入真实姓名' } ],
  orgId: [ { required: true, message: '请选择机构' } ],
  roleIds: [ { required: true, message: '请分配角色' } ],
};

function FormState() {
  const newO = {
    realName: '',
    orgId: '',
    phoneNumber: '',
    email: '',
    groupId: '',
    roleList: [],
    roles: [],
    get roleIds() {
      return this.roles.join(',');
    },
    sex: sexOptions[0].value,
    address: '',
  };

  const o = Object.assign(newO, props.row);
  o.roles = R.compose( R.map(R.prop('id')), R.prop('roleList') )(o);

  return o;
}


const formState = ref(FormState());

watch(
  () => formState.value.roles,
  (value, oldValue) => {
    3 < value.length && (formState.value.roles = oldValue);
  },
);

function save() {
  return REQU('/api/user/save', {
    method: 'POST',
    body: toFormData(formState.value),
  })
  .then(useResp({
    succ: result => {
      message.success('保存成功');
      return result;
    },
    fail: result => {
      message.error(result.message || '保存失败');
      return result;
    },
  }))
}

function onOk() {
  formElem.value
  .validate()
  .then(save)
  .then(result => {
    if (200 == result.code) {
      emit('ok');
      emit('update:visible', false);
    }
  })
  .catch(() => {});
}
</script>

<template>
  <a-modal
    :width="764"
    :visible="visible"
    :title="`${ formState.id ? '编辑' : '新建' }用户`"
    class="user-modal"
    @cancel="visible = false"
    @ok="onOk">
    <a-form
      ref="formElem"
      layout="vertical"
      :rules="rules"
      :model="formState">
      <div>
        <a-form-item required label="真实姓名" name="realName">
          <a-input v-model:value="formState.realName" placeholder="请输入真实姓名"></a-input>
        </a-form-item>
  
        <a-form-item required label="机构" name="orgId">
          <a-select
            v-model:value="formState.orgId"
            placeholder="请选择机构"
            :options="orgOptions"
            :field-names="{ label: 'name', value: 'id' }">
          </a-select>
        </a-form-item>
    

        <a-form-item label="手机号" name="phoneNumber">
          <a-input v-model:value="formState.phoneNumber" placeholder="请输入手机号"></a-input>
        </a-form-item>
  
        <a-form-item label="邮箱" name="email">
          <a-input v-model:value="formState.email" type="email" placeholder="请输入邮箱"></a-input>
        </a-form-item>
    

        <a-form-item label="分组" name="groupId">
          <a-input placeholder="请输入分组"></a-input>
        </a-form-item>
  
        <a-form-item required label="角色" name="roleIds">
          <a-select
            v-model:value="formState.roles"
            mode="multiple"
            placeholder="请分配角色"
            :options="roleListOfUser"
            :field-names="{ label: 'roleName', value: 'id' }">
          </a-select>
        </a-form-item>
    

        <a-form-item label="性别" name="sex">
          <a-radio-group v-model:value="formState.sex">
            <template v-for="item in sexOptions" :key="item.value">
              <a-radio :value="item.value">{{ item.label }}</a-radio>
            </template>
          </a-radio-group>
        </a-form-item>
  
        <a-form-item label="地址" name="address">
          <a-input v-model:value="formState.address" placeholder="请输入地址"></a-input>
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>

<style>
.user-modal .ant-form-item { width: 320px; }

.user-modal .ant-form > div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 60px;
}
</style>
